﻿<style>
    .cxuu-statistics-tips { font-size: 30px; padding: 50px; }
    .cxuu-statistics-tips li{ height: 120px; line-height: 120px; }
</style>
<div class="content-top-nav">
    <h3 style="color:#444"><i class="layui-icon layui-icon-home"> 统计操作台</i>  </h3>
    <hr>
</div>


<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <!--统计图表展示 S-->

        <div class="layui-col-md12">
            <div class="layui-col-md6">
                <div class="layui-col-md12">
                    <div id="forUserGroup" style="width:100%;height:500px;"></div>
                </div>
            </div>

            <div class="layui-col-md6">
                <div class="layui-col-md12">
                    <div id="forCateMonth" style="width:100%;height:500px;"></div>
                </div>
            </div>

        </div>

        <div class="layui-col-md12">
            <div id="forUserYear" style="width:100%;height:500px;"></div>
        </div>
        <!--统计图表展示 E-->
    </div>
</div>
<script src="~/lib/chart/echarts.min.js"></script>
<script>
    layui.define(function () {
        var element = layui.element, util = layui.util, laytpl = layui.laytpl;

        $.getJSON("/Admin/Statistics/Main", function (res) {


            var forCateMonth = echarts.init(document.getElementById('forCateMonth'));
            var CateMonthData = [];
            var CateMonthName = [];
            $.each(res.forCateMonth, function (i, arr) {
                var cateNameValue = {};
                cateNameValue.value = arr["value"];
                cateNameValue.name = arr["name"];
                CateMonthData.push(cateNameValue);

                CateMonthName.push(arr["name"]);
            });

            forCateMonth.setOption({
                title: {
                    text: '本月类别信息报送统计'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{c} {b}'
                },
                toolbox: {
                    feature: {
                        dataView: { readOnly: false },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                legend: {
                    data: CateMonthName,
                    top: 30,
                },
                series: [
                    {
                        name: '发布量',
                        type: 'funnel',
                        left: '10%',
                        top: 60,
                        bottom: 60,
                        width: '80%',
                        min: 0,
                        max: 100,
                        minSize: '0%',
                        maxSize: '100%',
                        sort: 'descending',
                        gap: 2,
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        labelLine: {
                            length: 10,
                            lineStyle: {
                                width: 1,
                                type: 'solid'
                            }
                        },
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        emphasis: {
                            label: {
                                fontSize: 20
                            }
                        },
                        data: CateMonthData
                    }
                ]
                   
            });


            var forUserGroup = echarts.init(document.getElementById('forUserGroup'));
            forUserGroup.setOption({
                title: [
                    {
                        text: '本月部门信息报送统计'
                    }
                ],
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: '部门报送条数',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: res.forUserGroup
                    }
                ]
            });

            var forUserYear = echarts.init(document.getElementById('forUserYear'));

            var markNum = [];
            var nameYear = [];
            var valueYear = [];
            $.each(res.forUserYear, function (i, arr) {
                markNum.push(arr["markNum"]);
                nameYear.push(arr["name"]);
                valueYear.push(arr["value"]);
            });

            forUserYear.setOption({
                title: [
                    {
                        text: '本年个人信息报送排名'
                    }
                ],

                tooltip: {
                    trigger: 'axis'
                },
                legend: {},
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        //dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: nameYear
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} 条'
                    }
                },


                     series: [
                    {
                        name: '报送量',
                        type: 'line',
                        data: valueYear,
                        markPoint: {
                            data: [
                                { type: 'max', name: 'Max' },
                                { type: 'min', name: 'Min' }
                            ]
                        },
                        markLine: {
                            data: [{ type: 'average', name: 'Avg' }]
                        }
                    },
                    {
                        name: '采用量',
                        type: 'line',
                        data: markNum,
                        markPoint: {
                            data: [
                                { type: 'max', name: 'Max' },
                                { type: 'min', name: 'Min' }
                            ]
                        },
                        markLine: {
                            data: [{ type: 'average', name: 'Avg' }]
                        }
                    }
                ]
            });
        });
    });
</script>